<template>
  <a-layout id="main-layout-container">
    <a-layout-sider
      :style="{ padding: '10px'}"
      id="layout-sider"
      :collapsed="!isDrawerOrSiderShowing"
      :trigger="null"
      collapsible
      collapsedWidth="60px"
      v-if="isHasEnoughWidthToShowSider"
    >
      <IconTitleBanner :show-title="isDrawerOrSiderShowing" />
      <PageMenu style="user-select: none" :exclude-names="['lookpost', 'lookarticle', 'newarticle']"/>
    </a-layout-sider>
    <a-drawer
      id="drawer-menu"
      v-model:visible="isDrawerOrSiderShowing"
      :mask="true"
      :closable="false"
      :drawerStyle="{ background: '#001529' }"
      placement="left"
      v-else
    >
      <IconTitleBanner :show-title="isDrawerOrSiderShowing" />
      <PageMenu style="user-select: none" :exclude-names="['lookpost', 'lookarticle', 'newarticle']"></PageMenu>
    </a-drawer>
    <a-layout id="main-layout" ref="mainLayout">
      <a-layout-content>
        <MainTopBar
          :exclude-names="['lookpost','lookarticle', 'newarticle']"
          v-model:drawer-or-sider-showing="isDrawerOrSiderShowing"
        ></MainTopBar>
        <PageTabs :exclude-names="['lookpost', 'lookarticle', 'newarticle']"></PageTabs>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import MainTopBar from "./public/MainTopBar.vue";
import PageTabs from "./public/PageTabs.vue";
import IconTitleBanner from "./public/IconTitleBanner.vue";
import PageMenu from "./public/PageMenu.vue";
import useAutoChangeDrawerAndSider from "@/composable/auto_change_drawer_sider";
const { isDrawerOrSiderShowing, isHasEnoughWidthToShowSider } =
  useAutoChangeDrawerAndSider();
</script>

<style scoped>
#layout-sider, #main-layout {
  height: 100vh;
  overflow-y: scroll;
}

#layout-sider::-webkit-scrollbar {
  display: none;
}

</style>
